/**
 * 全局样式文件
 * @description 定义全局的基础样式、重置样式和通用类
 */

@import './theme.scss';

// ================================
// 全局重置样式
// ================================

// 微信小程序不支持通用选择器 *，需要具体指定元素
view,
text,
button,
input,
textarea,
image,
scroll-view,
swiper,
swiper-item,
navigator,
picker,
picker-view,
picker-view-column,
slider,
switch,
audio,
video,
camera,
live-player,
live-pusher,
map,
canvas,
web-view,
ad,
official-account,
open-data,
rich-text,
movable-area,
movable-view,
cover-view,
cover-image,
page {
  box-sizing: border-box;
}

page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: $font-size-md;
  line-height: 1.6;
  color: $text-primary;
  background: var(--theme-background);
}

// ================================
// 通用工具类
// ================================

// 文本相关
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: $text-primary;
}

.text-secondary {
  color: $text-secondary;
}

.text-tertiary {
  color: $text-tertiary;
}

.text-quaternary {
  color: $text-quaternary;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-danger {
  color: $danger-color;
}

.text-info {
  color: $info-color;
}

// 字体大小
.text-xs {
  font-size: $font-size-xs;
}

.text-sm {
  font-size: $font-size-sm;
}

.text-md {
  font-size: $font-size-md;
}

.text-lg {
  font-size: $font-size-lg;
}

.text-xl {
  font-size: $font-size-xl;
}

.text-xxl {
  font-size: $font-size-xxl;
}

// 字体粗细
.font-light {
  font-weight: $font-weight-light;
}

.font-normal {
  font-weight: $font-weight-normal;
}

.font-medium {
  font-weight: $font-weight-medium;
}

.font-bold {
  font-weight: $font-weight-bold;
}

// 文本省略
.text-ellipsis {
  @include text-ellipsis(1);
}

.text-ellipsis-2 {
  @include text-ellipsis(2);
}

.text-ellipsis-3 {
  @include text-ellipsis(3);
}

// 布局相关
.flex {
  display: flex;
}

.flex-center {
  @include flex-center;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

// 间距相关
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.m-xs {
  margin: $spacing-xs;
}

.mt-xs {
  margin-top: $spacing-xs;
}

.mr-xs {
  margin-right: $spacing-xs;
}

.mb-xs {
  margin-bottom: $spacing-xs;
}

.ml-xs {
  margin-left: $spacing-xs;
}

.m-sm {
  margin: $spacing-sm;
}

.mt-sm {
  margin-top: $spacing-sm;
}

.mr-sm {
  margin-right: $spacing-sm;
}

.mb-sm {
  margin-bottom: $spacing-sm;
}

.ml-sm {
  margin-left: $spacing-sm;
}

.m-md {
  margin: $spacing-md;
}

.mt-md {
  margin-top: $spacing-md;
}

.mr-md {
  margin-right: $spacing-md;
}

.mb-md {
  margin-bottom: $spacing-md;
}

.ml-md {
  margin-left: $spacing-md;
}

.m-lg {
  margin: $spacing-lg;
}

.mt-lg {
  margin-top: $spacing-lg;
}

.mr-lg {
  margin-right: $spacing-lg;
}

.mb-lg {
  margin-bottom: $spacing-lg;
}

.ml-lg {
  margin-left: $spacing-lg;
}

.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.p-xs {
  padding: $spacing-xs;
}

.pt-xs {
  padding-top: $spacing-xs;
}

.pr-xs {
  padding-right: $spacing-xs;
}

.pb-xs {
  padding-bottom: $spacing-xs;
}

.pl-xs {
  padding-left: $spacing-xs;
}

.p-sm {
  padding: $spacing-sm;
}

.pt-sm {
  padding-top: $spacing-sm;
}

.pr-sm {
  padding-right: $spacing-sm;
}

.pb-sm {
  padding-bottom: $spacing-sm;
}

.pl-sm {
  padding-left: $spacing-sm;
}

.p-md {
  padding: $spacing-md;
}

.pt-md {
  padding-top: $spacing-md;
}

.pr-md {
  padding-right: $spacing-md;
}

.pb-md {
  padding-bottom: $spacing-md;
}

.pl-md {
  padding-left: $spacing-md;
}

.p-lg {
  padding: $spacing-lg;
}

.pt-lg {
  padding-top: $spacing-lg;
}

.pr-lg {
  padding-right: $spacing-lg;
}

.pb-lg {
  padding-bottom: $spacing-lg;
}

.pl-lg {
  padding-left: $spacing-lg;
}

// 背景相关
.bg-primary {
  @include gradient-bg($primary-gradient);
}

.bg-secondary {
  @include gradient-bg($secondary-gradient);
}

.bg-success {
  @include gradient-bg($success-gradient);
}

.bg-warning {
  @include gradient-bg($warning-gradient);
}

.bg-danger {
  @include gradient-bg($danger-gradient);
}

.bg-white {
  background-color: var(--theme-surface);
}

.bg-gray {
  background-color: $bg-secondary;
}

.bg-light {
  background-color: $bg-tertiary;
}

// 圆角相关
.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: $border-radius-small;
}

.rounded-md {
  border-radius: $border-radius-medium;
}

.rounded-lg {
  border-radius: $border-radius-large;
}

.rounded-xl {
  border-radius: $border-radius-xl;
}

.rounded-full {
  border-radius: 50%;
}

// 阴影相关
.shadow-none {
  box-shadow: none;
}

.shadow-light {
  box-shadow: $shadow-light;
}

.shadow-medium {
  box-shadow: $shadow-medium;
}

.shadow-heavy {
  box-shadow: $shadow-heavy;
}

// 边框相关
.border {
  border: 1rpx solid $border-color;
}

.border-light {
  border: 1rpx solid $border-light;
}

.border-primary {
  border: 1rpx solid $primary-color;
}

.border-t {
  border-top: 1rpx solid $border-color;
}

.border-r {
  border-right: 1rpx solid $border-color;
}

.border-b {
  border-bottom: 1rpx solid $border-color;
}

.border-l {
  border-left: 1rpx solid $border-color;
}

// 定位相关
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

// 显示隐藏
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

// 溢出处理
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

// 宽高相关
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

// ================================
// 通用组件样式
// ================================

// 卡片样式
.card {
  @include card-style($card-shadow, $border-radius-medium);
}

.card-hover {
  @include card-style($card-shadow, $border-radius-medium);
  transition: all $transition-normal;

  &:hover {
    box-shadow: $card-shadow-hover;
    transform: translateY(-2rpx);
  }
}

// 按钮样式
.btn {
  @include button-style($primary-gradient, $border-radius-medium);
  padding: $spacing-sm $spacing-lg;
  font-size: $font-size-md;
  border: none;
  cursor: pointer;

  &.btn-sm {
    padding: $spacing-xs $spacing-md;
    font-size: $font-size-sm;
  }

  &.btn-lg {
    padding: $spacing-md $spacing-xl;
    font-size: $font-size-lg;
  }

  &.btn-secondary {
    @include button-style($secondary-gradient, $border-radius-medium);
  }

  &.btn-success {
    @include button-style($success-gradient, $border-radius-medium);
  }

  &.btn-warning {
    @include button-style($warning-gradient, $border-radius-medium);
  }

  &.btn-danger {
    @include button-style($danger-gradient, $border-radius-medium);
  }
}

// 输入框样式
.input {
  padding: $spacing-sm $spacing-md;
  border: 2rpx solid $border-color;
  border-radius: $border-radius-medium;
  font-size: $font-size-md;
  background-color: var(--theme-surface);
  transition: border-color $transition-normal;

  &:focus {
    border-color: $primary-color;
    outline: none;
  }

  &.input-error {
    border-color: $danger-color;
  }
}

// 分割线
.divider {
  height: 1rpx;
  background-color: $divider-color;
  margin: $spacing-md 0;
}

.divider-vertical {
  width: 1rpx;
  background-color: $divider-color;
  margin: 0 $spacing-md;
}